<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ABC会员管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#000000',
                        accent: '#FF6B6B',
                        secondary: '#4ECDC4',
                        tertiary: '#FFD166'
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-sm py-4">
        <div class="container mx-auto px-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <!-- 导航栏中的小型logo -->
                <svg class="w-8 h-8" viewBox="0 0 100 40" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0" y="0" width="30" height="40" fill="#000000" />
                    <text x="15" y="28" font-family="Arial, sans-serif" font-size="24" font-weight="bold" text-anchor="middle" fill="white">A</text>
                    <rect x="35" y="0" width="30" height="40" fill="#FF6B6B" />
                    <text x="50" y="28" font-family="Arial, sans-serif" font-size="24" font-weight="bold" text-anchor="middle" fill="white">B</text>
                    <rect x="70" y="0" width="30" height="40" fill="#4ECDC4" />
                    <text x="85" y="28" font-family="Arial, sans-serif" font-size="24" font-weight="bold" text-anchor="middle" fill="white">C</text>
                </svg>
                <span class="text-gray-800 font-medium hidden sm:inline">ABC店铺</span>
            </div>
            <nav>
                <ul class="flex space-x-6">
                    <li><a href="#" class="text-primary font-medium hover:text-gray-600 transition-colors">首页</a></li>
                    <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">功能</a></li>
                    <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">帮助</a></li>
                    <li><a href="#" class="text-gray-600 hover:text-primary transition-colors">登录</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-1 flex flex-col items-center justify-center py-12 px-4">
        <div class="text-center max-w-3xl mx-auto">
            <!-- 主Logo -->
            <div class="mb-8 flex justify-center">
                <svg class="w-48 h-24" viewBox="0 0 200 80" xmlns="http://www.w3.org/2000/svg">
                    <!-- A字母 - 黑色为主 -->
                    <rect x="0" y="0" width="60" height="80" fill="#000000" />
                    <polygon points="10,70 30,10 50,70" fill="#FFD166" />
                    <text x="30" y="55" font-family="Arial, sans-serif" font-size="40" font-weight="bold" text-anchor="middle" fill="white">A</text>
                    
                    <!-- B字母 - 黑色为主 -->
                    <rect x="70" y="0" width="60" height="80" fill="#000000" />
                    <circle cx="90" cy="25" r="15" fill="#FF6B6B" />
                    <circle cx="90" cy="55" r="15" fill="#FF6B6B" />
                    <rect x="95" y="10" width="20" height="30" rx="5" fill="#FF6B6B" />
                    <text x="100" y="55" font-family="Arial, sans-serif" font-size="40" font-weight="bold" text-anchor="middle" fill="white">B</text>
                    
                    <!-- C字母 - 黑色为主 -->
                    <rect x="140" y="0" width="60" height="80" fill="#000000" />
                    <path d="M160,10 Q200,10 200,40 Q200,70 160,70" stroke="#4ECDC4" stroke-width="8" fill="none" />
                    <text x="170" y="55" font-family="Arial, sans-serif" font-size="40" font-weight="bold" text-anchor="middle" fill="white">C</text>
                </svg>
            </div>
            
            <!-- 系统名称 -->
            <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-gray-800 mb-6 text-shadow">
                ABC会员管理系统
            </h1>
            
            <!-- 简短描述 -->
            <p class="text-gray-600 text-lg mb-8 max-w-xl mx-auto">
                高效管理您的会员信息，提升客户体验，助力店铺业绩增长
            </p>
            
            <!-- 操作按钮 -->
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <a href="#" class="bg-primary hover:bg-gray-800 text-white font-medium py-3 px-8 rounded-lg transition-colors shadow-md hover:shadow-lg">
                    <i class="fa fa-sign-in mr-2"></i>立即登录
                </a>
                <a href="#" class="bg-white border border-gray-300 hover:border-primary text-gray-700 font-medium py-3 px-8 rounded-lg transition-colors shadow-sm hover:shadow">
                    <i class="fa fa-info-circle mr-2"></i>了解更多
                </a>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-gray-300 py-8">
        <div class="container mx-auto px-4 text-center">
            <p>&copy; 2025 ABC店铺. 保留所有权利.</p>
            <div class="mt-4 flex justify-center space-x-6">
                <a href="#" class="hover:text-white transition-colors"><i class="fa fa-question-circle"></i> 帮助中心</a>
                <a href="#" class="hover:text-white transition-colors"><i class="fa fa-phone"></i> 联系我们</a>
                <a href="#" class="hover:text-white transition-colors"><i class="fa fa-file-text-o"></i> 隐私政策</a>
            </div>
        </div>
    </footer>
</body>
</html>
    